/**
 * @author nttdocomo
 */
define(function(require) {
	require("../container/container");
	require("../container/dockingContainer");
	aries.klass("aries.panel.AbstractPanel", aries.container.Container.extend({
		renderTpl : [
		// If this Panel is framed, the framing template renders the docked items round the frame
		'<%= renderDockedItems($comp,0) %>',
		// This empty div solves an IE6/7/Quirks problem where the margin-top on the bodyEl
		// is ignored. Best we can figure, this is triggered by the previousSibling being
		// position absolute (a docked item). The goal is to use margins to position the
		// bodyEl rather than left/top since that allows us to avoid writing a height on the
		// panel and the body. This in turn allows CSS height to expand or contract the
		// panel during things like portlet dragging where we want to avoid running a ton
		// of layouts during the drag operation.
		(aries.isIE6 || aries.isIE7 || aries.isIEQuirks) ? '<div></div>' : '', '<div id="<%=id%>-body" class="<%=baseCls%>-body<%if(typeof(bodyCls)!=="undefined"){%> <%=bodyCls%><%};%>', ' <%=baseCls%>-body-<%=ui%><%if(typeof(uiCls)!=="undefined"){%>', '<%_.each(uiCls,function(cls){%> <%=baseCls%>-body-<%=ui%>-<%=cls%><%});%>', '<%};%>"<%if(typeof(bodyStyle)!=="undefined"){%> style="<%=bodyStyle%>"<%};%>>', '<%=renderContainer($comp)%>', '</div>', '{% this.renderDockedItems(out,values,1); %}'].join(""),
		/**
		 * @cfg {String} [baseCls=x-panel]
		 * The base CSS class to apply to this panel's element.
		 */
		baseCls : aries.baseCSSPrefix + 'panel',

		/**
		 * Parses the {@link #bodyStyle} config if available to create a style string that will be applied to the body element.
		 * This also includes {@link #bodyPadding} and {@link #bodyBorder} if available.
		 * @return {String} A CSS style string with body styles, padding and border.
		 * @private
		 */
		initBodyStyles : function() {
			var me = this, body = me.getProtoBody(), Element = Ext.Element;

			if (me.bodyPadding !== undefined) {
				body.setStyle('padding', Element.unitizeBox((me.bodyPadding === true) ? 5 : me.bodyPadding));
			}
			if (me.frame && me.bodyBorder) {
				if (!Ext.isNumber(me.bodyBorder)) {
					me.bodyBorder = 1;
				}
				body.setStyle('border-width', Element.unitizeBox(me.bodyBorder));
			}
		},
		initComponent : function() {
			var me = this;

			//!frame
			//!border

			if (me.frame && me.border && me.bodyBorder === undefined) {
				me.bodyBorder = false;
			}
			if (me.frame && me.border && (me.bodyBorder === false || me.bodyBorder === 0)) {
				me.manageBodyBorders = true;
			}

			aries.container.Container.prototype.initComponent.apply(this, arguments);

		},

		/**
		 * Initialized the renderData to be used when rendering the renderTpl.
		 * @return {Object} Object with keys and values that are going to be applied to the renderTpl
		 * @private
		 */
		initRenderData : function() {
			var me = this, data = _.extend(aries.container.Container.prototype.initRenderData.apply(this, arguments), {
				header : this.header.html()
			});

			//me.initBodyStyles();
			//me.protoBody.writeTo(data);
			//delete me.protoBody;

			return data;
		},

		// @private
		initItems : function() {
			aries.container.Container.prototype.initItems.apply(this, arguments);
			this.initDockingItems();
		},

		setupRenderTpl : function(renderTpl) {
			aries.container.Container.prototype.setupRenderTpl.apply(this, arguments);
			this.setupDockingRenderTpl(renderTpl);
		},

		setupRenderData : function(renderData) {
			renderData = aries.container.Container.prototype.setupRenderData.apply(this, arguments);
			return this.setupDockingRenderData(renderData);
		}
	})).mixin({
		docking : aries.container.DockingContainer
	})
})
